<template>
  
  <el-dialog
  :title="title"
  :visible.sync="visible"
  width="60%"
  :before-close="handleClose">
    <el-form :model="formData" ref="formData" label-width="100px" class="demo-ruleForm" style="width:90%">
    <el-form-item label="标题：">
        <el-input v-model="formData.title" readonly></el-input>
    </el-form-item>
    <el-form-item label="标签：" >
        <el-cascader 
            style="display: block"
            disabled 
            v-model="formData.labelIds"
            :options="options"
            :props="props"
            clearable>
        </el-cascader>
    </el-form-item>
    <el-form-item label="主图：">
        <img :src="formData.imageUrl" style="width:180px; height:180px; display:block">
    </el-form-item>
    <el-form-item label="是否公开：">
        <el-radio-group v-model="formData.ispublic" disabled>
        <el-radio :label="1">公开</el-radio>
        <el-radio :label="0">不公开</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item label="简介：" >
        <el-input type="textarea" readonly v-model="formData.summary"></el-input>
    </el-form-item>
    <el-form-item label="内容：">
        <mavon-editor v-model="formData.mdContent" :editable="false"/>
    </el-form-item>
    <el-form-item v-show="isAudit">
        <el-button type="primary" @click="auditSuccess">审核通过</el-button>
        <el-button @click="auditFail" type="danger">审核不通过</el-button>
    </el-form-item>
    </el-form>
    </el-dialog>
  
</template>

<script>
import api from '@/api/article'
// 引入mavon-editor插件
import {mavonEditor} from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
    data() {
        return {
            formData:{

            },
            props: {
                 multiple: true ,
                 children:"labelList",
                 label:'name',
                 value:'id',
                 emitPath:false
            },
            options:[]
        
        }
    },
    components: { mavonEditor },
    props:{
        id:null,
        visible:{
            type:Boolean,
            default:false
        },
        isAudit:{
            type:Boolean,
            default:true
        },
        title:{
            type:String,
            default:''
        },
        remoteClose: Function ,

    },
    methods: {
        // 关闭窗口
        handleClose(){
            // this.$refs.formData.resetFields()
            this.remoteClose()
        },
        // 审核通过
        auditSuccess(){
            this.$confirm('确认审核通过吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    api.auditSuccess(this.id).then(response=>{
                        if(response.code===20000){
                            this.$message({
                                type: 'success',
                                message: '审核通过!'
                            });
                        }else{
                            this.$message({
                                type: 'info',
                                message: '审核失败!'
                            });
                        }
                        this.handleClose()
                    })
                
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });          
            });
        },
        // 审核不通过
        auditFail(){
            this.$confirm('确认审核不通过吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    api.auditFail(this.id).then(response=>{
                        if(response.code===20000){
                            this.$message({
                                type: 'success',
                                message: '审核不通过!'
                            });
                        }else{
                            this.$message({
                                type: 'info',
                                message: '审核失败!'
                            });
                        }
                        this.handleClose()
                    })
                
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });          
            });
        },
        // 查询文章详情
        getArticleById(){
            api.getById(this.id).then(response=>{
                if(response.code===20000){
                    this.formData=response.data
                }
            })
        },
        // 获取所有分类下的标签
        getLabelOptions(){
            api.getCategoryAndLabel().then(response=>{
                if(response.code===20000){
                    this.options=response.data
                }
            })
        }

    },

    watch:{
        visible(val){
            if(val){
                this.getArticleById()
                this.getLabelOptions()
            }
        }
    }
}
</script>

<style>

</style>